<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <title>我的个人信息</title>
</head>
<body>
<div class="row" th:replace="_fragments :: menu(0)"></div>

<th:block th:replace="_fragments :: script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</th:block>

<script type="text/javascript">
    $(document).ready(function () {
        $('.ui.form').form({
                name: {
                    identifier: 'name',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入姓名'
                        }
                    ]
                },
                age: {
                    identifier: 'age',
                    rules: [
                        {
                            type: 'integer[18..50]',
                            prompt: '有效年龄为18~50'
                        }
                    ]
                },
                add: {
                    identifier: 'userProvinceId',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入地址'
                        }
                    ]
                },
            },
            {
                on: 'blur',
                onSuccess: submitForm
            }
        );

        $('.ui.form').submit(function (e) {
            return false;
        });

    });

    function submitForm() {
        var location;
        var name = $("#name").val();
        var age = $("#age").val();
        if($("input[name='userProvinceId']").val()!=null) {
            var p_id = $("input[name='userProvinceId']").val();
            var c_id = $("input[name='userCityId']").val();
            var t_id = $("input[name='userDistrictId']").val();
            var province;
            var city;
            var town;
            for (var i = 0; i < cityData.length; i++) {
                if (cityData[i].id === p_id) {    //有选择的输出json数据
                    province = cityData[i].name;
                }
                if (cityData[i].id === c_id) {    //有选择的输出json数据
                    city = cityData[i].name;
                }
                if (cityData[i].id === t_id) {    //有选择的输出json数据
                    town = cityData[i].name;
                }
            }
            location = province + "-" + city + "-" + town;
        }else{
            location=$("#location").val();
        }
        console.log(location);
        $.ajax({
            url: "/user/update/" + location,
            type: "get",
            dataType: "json",
            data: {"name": name, "age": age},
            success: function (result) {
                if (result.code === 200) {
                    alert("修改成功");
                    window.location.href = "/user/info";
                } else {
                    alert("修改失败")
                }
            }
        });
    }


</script>
<div class="m-container m-padded-tb-big animated fadeIn">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="three wide column"></div>
            <div class="m-padding-lr m-mobile-lr-clear" style="border: 1px solid black;width: 700px;">
                <div class="ten wide column">
                    <form class="ui ap form">
                        <h2 class="ui header m-padded-tb" style="text-align: center!important;">个人信息</h2>
                        <div class="field">
                            <div class="ui rounded image" th:if="${users.avatar}==null">
                                <img src="../static/images/avatar.png" style="width: 100px;margin-left: 250px"
                                     th:src="@{/images/avatar.png}">
                            </div>
                            <div class="ui rounded image" th:if="${users.avatar}!=null">
                                <img src="${users.avatar}" style="width: 100px;margin-left: 252px;">
                            </div>
                        </div>
                        <div class="field">
                            <div class="two fields" style="margin-left: 170px;">
                                <label class="m-text-l-h m-padded-lr-mini" style="color: rgba(0,0,0,.87)!important;">上传头像:</label>
                                <div class="field seven wide column">
                                    <input type="file" style="border: 0px;">
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <div class="two fields" style="width: 170%!important;margin-left: 9%!important;">
                                <label class="m-text-l-h m-padded-lr-mini"
                                       style="color: rgba(0,0,0,.87)!important;">昵称:</label>
                                <div class="field seven wide column">
                                    <input type="text" name="name" id="name" th:value="${users.name}">
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <div class="two fields" style="width: 170%!important;margin-left: 9%!important;">
                                <label class="m-text-l-h m-padded-lr-mini"
                                       style="color: rgba(0,0,0,.87)!important;">账号:</label>
                                <div class="field seven wide column">
                                    <input type="text" name="phone" id="phone" th:value="${users.phone}" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <div class="two fields" style="width: 170%!important;margin-left: 9%!important;">
                                <label class="m-text-l-h m-padded-lr-mini"
                                       style="color: rgba(0,0,0,.87)!important;">年龄:</label>
                                <div class="field seven wide column">
                                    <input type="text" name="age" id="age" th:value="${users.age}">
                                </div>
                            </div>
                        </div>
                        <div class="field" th:if="${users.location}==''">
                            <div class="city-picker-selector" id="city-picker-search"
                                 style="z-index: 99!important;margin-left: -40px!important;width: 670px;">
                                <div class="selector-item storey province">
                                    <a href="#" class="selector-name reveal df-color forbid" id="pro">请选择省份</a>
                                    <input type="text" class="input-price val-error" value="" name="userProvinceId"
                                           data-required="userProvinceId">
                                    <div class="selector-list listing hide">
                                        <div class="selector-search">
                                            <input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
                                        </div>
                                        <ul>
                                            <li>北京市</li>
                                            <li>天津市</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="selector-item storey city">
                                    <a href="#" class="selector-name reveal df-color forbid">请选择城市</a>
                                    <input type="hidden" name="userCityId" class="input-price val-error" value=""
                                           data-required="userCityId">
                                    <div class="selector-list listing hide">
                                        <div class="selector-search">
                                            <input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
                                        </div>
                                        <ul></ul>
                                    </div>
                                </div>
                                <div class="selector-item storey district">
                                    <a href="javascript:;" class="selector-name reveal df-color forbid">请选择区县</a>
                                    <input type="hidden" name="userDistrictId" class="input-price val-error"
                                           value=""
                                           data-required="userDistrictId">
                                    <div class="selector-list listing hide">
                                        <div class="selector-search">
                                            <input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
                                        </div>
                                        <ul></ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="field" th:if="${users.location}!=null">
                            <div class="two fields" style="width: 170%!important;margin-left: 9%!important;">
                                <label class="m-text-l-h m-padded-lr-mini"
                                       style="color: rgba(0,0,0,.87)!important;">位置:</label>
                                <div class="field seven wide column">
                                    <input type="text" name="location" id="location" disabled th:value="${users.location}">
                                </div>
                            </div>
                        </div>
                        <div class="ui submit button" id="ok">保存</div>
                        <div class="ui button" href="#" onclick="javascript:history.go(-1);">返回</div>
                        <br><br>
                        <br><br>
                        <div class="ui error mini message"></div>
                        <br><br>
                    </form>
                </div>
            </div>
            <div class="three wide column"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../static/js/citydata.js"></script>
<script type="text/javascript" src="../static/js/cityPicker-1.0.0.js?v=1"></script>


<script type="text/javascript">
    //模拟城市-联动/搜索
    $('#city-picker-search').cityPicker({
        dataJson: cityData,
        renderMode: true,
        search: true,
        linkage: true
    });


</script>
</body>
</html>